<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="searchSubjectList()"
          type="primary"
          size="small"
        >查询结果</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="订单编号：">
            <el-input style="width: 203px" v-model="listQuery.orderSn" placeholder="请输入订单编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="发票状态：" >
            <el-select v-model="listQuery.isTax" clearable>
                <el-option value="0" label="未开票"></el-option>
                <el-option value="1" label="已开票"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <!-- <el-button class="btn-add" @click="addSubject()" size="mini">添加</el-button> -->
    </el-card>
     <!-- :data="list" -->
    <div class="table-container">
      <!-- @selection-change="handleSelectionChange" -->
      <el-table
        ref="subjectTable"
        :data="list"
        style="width: 100%"
        
        v-loading="listLoading"
        border
      >
        <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->

        <el-table-column label="编号" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="科技馆" v-if="storeId <= 0" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.storeName}}</template>
        </el-table-column>  
        <el-table-column label="订单编号" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.orderSn}}</template>
        </el-table-column>
        <el-table-column label="用户昵称" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.memberUsername}}</template>
        </el-table-column>        
        <el-table-column label="开票状态" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.isTax == 0 ? '未开票' : '已开票'}}</template>
        </el-table-column>
        <!-- <el-table-column label="发票" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <img style="height: 80px" :src="scope.row.taxContent" v-if="scope.row.taxContent && scope.row.taxContent.includes('http')"/>
          </template>
        </el-table-column> -->
        <el-table-column label="申请时间" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.taxApplyTime | formatCreateTime}}</template>
        </el-table-column>
        <el-table-column label="开票时间" align="center" width="250" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.taxUploadTime | formatCreateTime}}</template>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" >
        <!-- <el-table-column label="操作" align="center" fixed="right" width="170"> -->
          <template slot-scope="scope">
            <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">上传发票</el-button>
            <el-button size="mini" @click="handleInfo(scope.$index, scope.row)">发票信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="发票信息" :visible.sync="showInfo">

        <el-form v-model="infoData">
            <el-form-item prop="taxType" label="发票类型：">
                <template>
                    <span>{{infoData.taxType | taxType}}</span>
                </template>
            </el-form-item>
            <el-form-item prop="taxTitle" label="发票抬头：">
                <template>
                    <span>{{infoData.taxTitle}}</span>
                </template>
            </el-form-item>
            <el-form-item prop="taxCode" label="税号：" v-if="infoData.taxType == 1">
                <template>
                    <span>{{infoData.taxCode}}</span>
                </template>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="上传发票" :visible.sync="showFp">

        <el-form v-model="upload">
            <el-form-item label="发票凭证：" prop="taxContent">
                <el-upload
                class="avatar-uploader"
                :data="dataObj"
                :action="uploadApi"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="upload.taxContent && !isPdf" :src="upload.taxContent" class="avatar">
                <i v-if="!upload.taxContent && !isPdf" class="el-icon-plus avatar-uploader-icon"></i>
                <span v-if="upload.taxContent && isPdf">{{pdfName}}</span>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onUpload()">确定</el-button>
                <el-button @click="showFp = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>    
    <div class="batch-operate-container"></div>
    <!-- :total="total" -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,50]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      ></el-pagination>
    </div>
    <p style="width:100%;height:30px;"></p>
  </div>
</template>
<script>
import { formatDate } from "@/utils/date";
import {
    fpList,fpUpload
} from "@/api/finance/api";

export default {
  name: "subjectList",
  data() {
    return {
      operates: [
        {
          label: "显示品牌",
          value: "showSubject",
        },
        {
          label: "隐藏品牌",
          value: "hideSubject",
        },
      ],
      operateType: null,
      listQuery: {
        keyword: null,
        pageNum: 1,
        pageSize: 10,
        isTax:null,
      },
      list: null,
      total: null,
      listLoading: true,
      multipleSelection: [],
      showInfo: false,
      infoData: {
          taxType: 1,
          taxTitle: '',
          taxCode: ''
      },
      showFp: false,
      isPdf: false,
      pdfName: '',
      // uploadApi: process.env.BASE_API+'aliyun/oss/upload1',// 上传文件路由
      uploadApi: process.env.BASE_API+'cos/upload',// 上传文件路由
        dataObj: {
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: ''
        },
        upload: {
            taxContent: '',
        },
        curId: '', 
        storeId: null
    };
  },
  created() {
    this.getList();
    this.storeId = this.$store.state.user.storeId;
    console.log(this.storeId,321789)
  },
  filters: {
    formatCreateTime(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },

    taxType (type) {
        if (type == 0) {
            return '不开发票'
        } else if (type == 1) {
            return '企业'
        } else if (type == 2) {
            return '个人'
        }
    },

    formatStatus(value) {
      if (value === 1) {
        return "未开始";
      } else if (value === 2) {
        return "活动中";
      } else if (value === 3) {
        return "已结束";
      } else if (value === 4) {
        return "已失效";
      }
    },
  },
  methods: {
    handleInfo (idx, row) {
        this.infoData = row
        this.showInfo = true
    },
    getList() {
      this.listLoading = true;
      fpList(this.listQuery).then((response) => {
        this.listLoading = false;
        this.list = response.data.records;
        this.total = response.data.total;
        this.totalPage = response.data.pages;
        this.pageSize = response.data.size;
      });
    },
    onUpload () {
        if (!this.upload.taxContent) {
            this.$message.error('请先上传发票！')
            return false
        }
        fpUpload(this.curId, this.upload).then(res => {
            this.$message.success('上传成功')
            this.showFp = false
            this.getList()
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleUpdate(index, row) {
        this.showFp = true
        this.curId = row.id
    },
      handleAvatarSuccess(res, file) {
        this.upload.taxContent = res.data
      },
      beforeAvatarUpload(file) {
          console.log(file, 9999)
          // pdf 文件
          if (file.type.indexOf('pdf') > -1) {
              this.isPdf = true
              this.pdfName = file.name
          } else {
              this.isPdf = false
              this.pdfName = ''
          }
        // const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传图片只能是 JPG或PNG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传图片大小不能超过 2MB!');
        // }
        // return isJPG && isLt2M;
      },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    searchSubjectList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleBatchOperate() {
      console.log(this.multipleSelection);
      if (this.multipleSelection < 1) {
        this.$message({
          message: "请选择一条记录",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      let showStatus = 0;
      if (this.operateType === "showSubject") {
        showStatus = 1;
      } else if (this.operateType === "hideSubject") {
        showStatus = 0;
      } else {
        this.$message({
          message: "请选择批量操作类型",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      let ids = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id);
      }
      let data = new URLSearchParams();
      data.append("ids", ids);
      data.append("showStatus", showStatus);
      updateShowStatus(data).then((response) => {
        this.getList();
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    addSubject() {
      this.$router.push({ path: "/cms/addSubject" });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>


